<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Laravel Echo Test</title>
</head>
<body>
<h1>Listening for events...</h1>
{{ auth()->check() ? '已登录' : '未登录' }}
<!-- 引入编译后的 JS -->
<script src="{{ asset('js/app.js') }}"></script>
<script>
    // 本来 广播基础配置,在 public/js/app.js  频道监听
    // 监听连接状态
    const socket = window.Echo.connector.socket;

    console.log('初始化时是否连接:', socket.connected ? '🟢 已连接' : '🔴 未连接');

    // 手动检查连接状态
    setInterval(() => {
        console.log('实时状态:', socket.connected ? '🟢 已连接' : '🔴 断开');
    }, 5000);

    socket.on('connect', () => {
        console.log('✅ Socket.IO connected!');
        console.log('=== Socket 连接信息 ===');
        console.log('Socket ID:', socket.id);
        console.log('Transport:', socket.io.engine.transport.name);

        //发送一条消息
        socket.emit('client-message', {
            channel: 'laravel_database_chat-public',
            event: '.hello',
            data: { test: '客户端测试消息' }
        });
    });
    socket.on('disconnect', () => {
        console.log('❌ Socket.IO disconnected!');
    });
    socket.on('error', (err) => {
        console.error('❌ Socket.IO error:', err);
    });



    // 频道监听 本文件 配置

    // 订阅公共频道
    window.Echo.channel('chat-public')
        .listen('.hello', (e) => {
            console.log("echo-laravel_database_chat-public",e);
        });

    // 订阅私有频道
    // 自定义事件名 需加上频道前缀
    //const userId = {{ auth()->id() }};
    const userId = 1;
    window.Echo.private('user.' + userId)
        .listen('.user.msg', (e) => {
            console.log('私有频道', e);
        });

    // 监听通知
    Echo.private('user.' + userId)
        .notification((notification) => {
            console.log('监听通知', notification.type, notification);
        });


    //-- 原生 socket.io  测试连接失败的原因
    // const socketraw = io('http://' + window.location.hostname  +':6001', {
    //     transports: ['websocket'],
    // });
    //
    // socketraw.on('connect', () => {
    //     console.log('✅ 原生 socket.io 成功连接！');
    // });
    // socketraw.on('disconnect', () => {
    //     console.log('❌ 原生 socket.io 断开连接！');
    // });
    // socketraw.on('connect_error', (err) => {
    //     console.error('❌ 原生 socket.io 错误:', err);
    // });
    //-----#

    // 9. 发送测试消息到服务器
    setTimeout(() => {
        console.log('=== 发送测试消息 ===');
        socket.emit('client-message', {
            channel: 'laravel_database_chat-public',
            event: 'hello',
            data: { test: '客户端测试消息' }
        });
    }, 3000);


    /*
     // 5. 检查 Laravel Echo 的内部状态
    console.log('=== Laravel Echo 内部状态 ===');
    console.log('Echo connector:', window.Echo.connector);
    console.log('已订阅的频道:', window.Echo.connector.channels);

    // 遍历所有频道并检查其状态
    Object.keys(window.Echo.connector.channels).forEach(channelName => {
        const channel = window.Echo.connector.channels[channelName];
        console.log(`频道 [${channelName}]:`, channel);
        console.log(`频道监听器:`, channel.listeners);
    });

    // 6. 手动测试频道订阅
    console.log('=== 手动测试频道订阅 ===');

    const testChannel = window.Echo.channel('laravel_database_chat-public');

    // 检查频道对象
    console.log('测试频道对象:', testChannel);
    console.log('频道 socket:', testChannel.socket);

    // 添加详细的事件监听
    testChannel
        .subscribed(() => {
            console.log('✅ 频道订阅成功: laravel_database_chat-public');
        })
        .error((error) => {
            console.error('❌ 频道订阅错误:', error);
        });

    // 7. 监听频道的原始事件
    if (testChannel.socket) {
        // 监听频道相关的所有事件
        testChannel.socket.on('laravel_database_chat-public:hello', (data) => {
            console.log('🔴 频道命名空间事件:', data);
        });

        // 尝试不同的事件格式
        testChannel.socket.on('App\\Events\\HelloEvent', (data) => {
            console.log('🟠 完整事件类名:', data);
        });
    }

    // 8. 检查 Laravel Echo 的事件处理器
    console.log('=== Laravel Echo 事件处理器 ===');

    // 重写 channel 的 listen 方法来调试
    const originalListen = testChannel.listen;
    testChannel.listen = function(event, callback) {
        console.log(`👂 注册监听器 - 事件: ${event}`);
        console.log('回调函数:', callback);

        // 调用原始方法
        const result = originalListen.call(this, event, callback);

        console.log('监听器注册结果:', result);
        return result;
    };

    // 重新注册监听器
    testChannel.listen('hello', (e) => {
        console.log('🎯 Laravel Echo 监听到 hello 事件:', e);
    });*/

</script>
</body>
</html>
